<template>
    <div>
        
        <ul v-for="(item,index) in list" :key="item.name">

         <h1 :id="index">{{item.name }}</h1>
        <li v-for="item in item.foods" :key="item.name" >
                <!-- 标题栏 -->
              <div class="cont">
                <img :src="item.icon" alt="">
                <div class="cont-detail">
                    <p class="p1">{{ item.name }}</p>
                    <p class="p2">
                        {{item.description}}
                    </p>
                    <p class="p3">
                        <span>月售{{item.sellCount}}份&ensp;</span>
                        <span>好评率{{item.rating}}%</span>
                    </p>
                    <div class="shop">
                        <p class="p4">￥{{item.price}}</p>
                        <div>
                            <p @click="reduse" v-show=" num !== 0" class="p5">-</p>
                        <p class="p6" v-show=" num !== 0">{{num}}</p>
                        <p class="p7" @click="add">+</p>
                        </div>
                    </div>
                </div>
              </div>
              <br><hr>
            </li>
          </ul>
        
    </div>
</template>

<script>
// import { join } from 'lodash';
import axios from 'axios';
export default {
    data () {
        return {
            num:1,
            list:[],
            tabName:[],
        }
    },
    methods:{
        
    },
    methods:{
        async getData() {
        const {data} = await axios.get("http://localhost:3006/list");
        this.list=data.goods;

        console.log(this.list)
        // this.tab = [...data.goods];
        // console.log(data.goods);
      },
      add(){
            this.num++;
        },
        reduse(){
            this.num--;
        }
    },
    created() {
        this.getData();
    },
    
}
</script>

<style  scoped>
   *{
    margin: 0;
    padding: 0;
   }
   ul{
    padding-left: 50px;

   }
   ul h1{
    height: 50px;
    line-height: 50px;
    font-size: 25px;
    color: rgb(173, 176, 178);
    background-color: #f3f5f7;
   }
   ul li{
      list-style: none;
      margin-top: 36px;
      /* padding-bottom: 36px; */
   }
   .cont{
    display: flex;
   }

   .cont img{
    width: 150px;
    height: 150px;
   }
   .cont .cont-detail{
    margin-left: 15px;
    width: 350px;
   }
   .cont .cont-detail .p1{
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 15px;
   }
   .cont .cont-detail .p2{
    font-size: 20px;
    color: rgb(147, 153, 159);
    line-height: 1;
    margin-bottom: 15px;
   }
   .cont .cont-detail .p3{
    font-size: 20px;
    color: rgb(147, 153, 159);
    line-height: 1;
    margin-bottom: 15px;
   }
   .cont .cont-detail .shop{
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    line-height: 1;
    margin-bottom: 15px;
   }
   .cont .cont-detail .shop div{
    width: 150px;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    line-height: 1;
    margin-bottom: 15px;
    float: right;
   }
   .cont .cont-detail .shop .p4{
    color: red;
   }
   .cont .cont-detail .shop .p5{
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: white;
    line-height: 27px;
    text-align: center;
    background-color: rgb(26, 202, 242);
    border-radius: 50%;
   }
   .cont .cont-detail .shop .p7{
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: white;
    line-height: 27px;
    text-align: center;
    background-color: rgb(26, 202, 242);
    border-radius: 50%;
   }
</style>